<template>
  <el-dialog title="配置显示字段" :visible.sync="visible" width="30%" custom-class="dialog-showFields">
    <el-row>
      <span class="fl">默认显示：ssoid</span>
      <span class="fr">下方选项最多选择 <i class="red">7</i> 个，还可选择 <i class="red">{{7-checkList.length}}</i> 个</span>
    </el-row>
    <div v-for="val,key in cusAllTh">
      <h3>{{key}}</h3>
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="val,key in val" :label="val" :disabled="ifDisabled(val)" :key="val">{{key}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div slot="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave" :loading="isSaving">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    props: ['show'],
    data () {
      return {
        checkList: ['ssoid'],
        visible: this.show,
        isSaving: false
      }
    },
    watch: {
      show (val) {
        this.visible = val
      },
      visible (val) {
        this.$emit('update:show', val)
      },
      cusTh (val) {
        this.checkList = Object.values(val)
      }
    },
    computed: {
      ...mapState({
        cusAllTh: state => state.cusManage.cusAllTh,
        cusTh: state => state.cusManage.cusTh
      })
    },
    methods: {
      ...mapActions(['setCustomerTh']),
      // checkbox 是否禁用
      ifDisabled (val) {
        return this.checkList.length >= 7 && this.checkList.indexOf(val) === -1 || val === 'ssoid'
      },
      // 保存
      handleSave () {
        this.isSaving = true
        this.setCustomerTh(this.checkList)
          .then(res => {
            if (res.data.code === 1) {
              this.isSaving = false
              this.visible = false
              this.$emit('success')
              this.$message({
                type: 'success',
                message: '保存成功'
              })
            }
          })
      }
    }
  }
</script>
<style lang="scss">
  .dialog-showFields{
    .el-dialog__body{padding-top:15px}
    .el-checkbox{margin-left:0;width:132px}
    h3{margin:15px 0 5px 0;font-size:14px;}
  }
</style>
